<template>
  <div>
      <table class="table">
          <tr v-for="(item,index) in list" :key="index">
              <td>{{item.shopname}}</td>
              <td>{{item.price}}</td>
              <td :class="item.status|statusFn|statusCss">{{item.status | statusFn }}</td>
          </tr>
      </table>
      {{$store.state.name}}
      <button @click="fn">修改name</button>
      {{$store.state.arr}}
  </div>
</template>

<script>
 import Flters from "../filters/index.js";
export default {
  data() {
    return {
      list: [
        {
          shopname: "商品1",
          price: "20元",
          status: 0, // 未付款
        },
        {
          shopname: "商品2",
          price: "30元",
          status: 1,  // 未发货
        },
        {
          shopname: "商品3",
          price: "40元",
          status: 2, // 未签收
        },
        {
          shopname: "商品4",
          price: "50元",
          status: 3, // 未评价
        },
      ],
    };
  },
  filters: Flters,
  methods:{
    fn(){
      this.$store.commit("setName","lisi")
    }
  },
  mounted(){
    this.$store.dispatch("getList")
  }
};
</script>

<style>
 td {
    border: 1px solid #000;
 }
 .not-pay {
     color: red;
 }
 .not-send {
     color:pink;
 }
 .not-recerive {
     color: yellow;
 }
 .not-commnent {
     color: skyblue;
 }
</style>